<template>
  <Form
    ref="form"
    @submit="onSubmit"
  >
    <!-- 注册方式选择 -->
    <div class="q-pt-md">
      <div class="text-caption text-weight-bold q-pb-xs">
        注册方式
      </div>
      <q-option-group
        v-model="user.source"
        :options="sourceOptions"
        inline
        class="q-gutter-x-lg"
      />
    </div>

    <!-- 手机号注册 -->
    <Input
      v-if="user.source === 4"
      v-model="user.username"
      label="手机号"
      :rules="phoneRules"
      class="q-pt-md"
    />
    <!-- 天天ID注册 -->
    <Input
      v-if="user.source === 0"
      v-model="user.username"
      label="天天ID"
      :rules="ttidRules"
      class="q-pt-md"
    />

    <!-- 微信号注册 -->
    <Input
      v-if="user.source === 6"
      v-model="user.username"
      label="微信号"
      :rules="wechatRules"
      class="q-pt-md"
    />

    <!-- 通用密码字段 -->
    <Input
      v-model="user.password"
      label="密码"
      :rules="passwordRules"
      class="q-pt-md"
      :type="visibility ? 'text' : 'password'"
    >
      <template #append>
        <q-icon
          :name="visibility ? 'visibility_off' : 'visibility'"
          class="cursor-pointer"
          @click="visibility = !visibility"
        />
      </template>
    </Input>

    <!-- 昵称 -->
    <Input
      v-model="user.nickname"
      label="昵称"
      class="q-pt-md"
    />

    <!-- 个人简介 -->
    <Input
      v-model="user.intro"
      label="个人简介"
      type="textarea"
      :rules="[v => maxLength(v, 200)]"
      class="q-pt-md"
    />

    <!-- 签名 -->
    <Input
      v-model="user.signature"
      label="签名"
      type="textarea"
      :rules="[v => maxLength(v, 100)]"
      class="q-pt-md"
    />

    <!-- 邮箱 -->
    <Input
      v-model="user.email"
      label="邮箱"
      class="q-pt-md"
      :rules="[v => v => email(v)]"
    />

    <div class="q-pt-lg row justify-between">
      <div class="col-6">
        <router-link :to="{ name: 'Login' }">
          <span>已有账号？</span>
        </router-link>
      </div>
      <div class="col-6 text-right">
        <Button
          label="注册"
          aria-label="Register"
          type="submit"
          :loading="isLoading"
        />
      </div>
    </div>
  </Form>
</template>

<script>
import { defineComponent, ref, computed } from 'vue';
import useValidation from 'src/composables/validation.js';
import { useAuthStore } from 'src/stores/auth.js';

export default defineComponent({
  name: 'Register',

  setup() {
    const {
      required,
      email,
      phone,
      minLength,
      maxLength,
    } = useValidation();

    const { isLoading, register } = useAuthStore();

    const form = ref(null);
    const visibility = ref(false);

    // 用户数据模型
    const user = ref({
      source: 0, // 默认选中手机注册
      username: '',
      email: '',
      password: '',
      nickname: '',
      intro: '',
      signature: '',
      phone: '',
    });

    // 注册方式选项
    const sourceOptions = [
      { label: '手机号', value: 4 },
      { label: '天天ID', value: 0 },
      { label: '微信号', value: 6 },
    ];

    // 动态验证规则
    const phoneRules = computed(() => [
      (v) => required(v, '手机号'),
      (v) => phone(v),
    ]);

    const ttidRules = computed(() => [
      (v) => required(v, '天天ID'),
      (v) => minLength(v, 3),
      (v) => maxLength(v, 256),
      (v) => /^[a-zA-Z0-9_]+$/.test(v) || '只能包含字母、数字和下划线',
    ]);

    const wechatRules = computed(() => [
      (v) => required(v, '微信号'),
      (v) => minLength(v, 3),
      (v) => maxLength(v, 256),
      (v) => /^[a-zA-Z][\w-]{5,19}$/.test(v) || '微信号格式不正确',
    ]);

    // 密码验证规则
    const passwordRules = computed(() => [
      (v) => required(v, '密码'), // 必填校验
      (v) => minLength(v, 3) || '密码至少需要 3 个字符', // 最小长度校验
      // (v) => /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/.test(v) || '密码需包含字母和数字', // 字符组合校验
    ]);

    const onSubmit = function () {
      form.value.validate().then((success) => {
        if (success) {
          const payload = {
            source: user.value.source, // 默认选中手机注册
            username: user.value.username,
            email: user.value.email,
            password: user.value.password,
            nickname: user.value.nickname,
            intro: user.value.intro,
            signature: user.value.signature,
          };
          if (user.value.source === 4) {
            payload.phone = user.value.username;
          }
          // register({
          //   ...user.value,
          //   // 头像使用默认值（可按需修改）
          //   avatar: user.value.avatar || 'default-avatar.png'
          // });
          register(payload);
        }
      });
    };

    return {
      form,
      required,
      email,
      minLength,
      maxLength,
      user,
      visibility,
      isLoading,
      sourceOptions,
      onSubmit,
      phoneRules,
      ttidRules,
      wechatRules,
      passwordRules,
    };
  },
});
</script>
